<template>
    <l-layout class="l-tab-page" v-if="!lr_loadPage">
        <l-panel>
            <template #toolLeft >
                <div class="l-panel--item" >
                    <el-input :placeholder="$t('请输入编码/名称')" v-model="keyWord"  @keyup.enter.native="hanleSearch" size="mini" >
                        <el-button slot="append" icon="el-icon-search" @click="hanleSearch" ></el-button>
                    </el-input>
                </div>
            </template>
            <template #toolRight >
                <l-tool-btns @click="handleAdd()" >
                    <l-excel-btns></l-excel-btns>
                </l-tool-btns>
            </template>
            <l-table 
                :loading="tableLoading"
                :columns="lr_getPageColumns(columns)" 
                :dataSource="tableData" 
                row-key="f_RuleId"
                :isPage="true"
                :pageTotal="tableTotal"
                :tablePage.sync="tableCurrentPage"

                @loadPageData="turnTablePage"
                >
                <template v-slot:f_CreateDate="scope" >
                    {{lr_dateFormat(scope.row.f_CreateDate)}}
                </template>
                <l-table-btns :btns="tableBtns" @click="lr_handleTableBtnClick" ></l-table-btns>
            </l-table>
        </l-panel>

        <l-drawer 
            :title="formTitle"
            :visible.sync="formVisible"
            @ok="handleSave"
            @close="handleCloseForm"
            @opened="handleOpenedForm"
            >
            <my-form ref="form" ></my-form>       
        </l-drawer>
    </l-layout>
</template>

<script>
const api = window.$api.data.coderule
import MyForm from './form'
export default {
    components: {
        MyForm
    },
    data () {
        return {
            lr_isPage:true,
            // 表格
            columns: [
                {label:'编码',prop:'f_EnCode',width:'164'},
                {label:'名称',prop:'f_FullName',minWidth:'160'},
                {label:'当前流水号',prop:'f_CurrentNumber',width:'184'},
                {label:'创建人',prop:'f_CreateUserName',width:'100',align:'center'},
                {label:'创建时间',prop:'f_CreateDate',width:'160'}
            ],
            tableBtns:[
                {prop:'Edit',label:'编辑',width:40},
                {prop:'Delete',label:'删除',width:40}
            ],
            tableLoading:false,
            tableTotal:0,
            tablePageSize:50,
            tableCurrentPage:1,
            tableData: [],
            keyWord:'',

            formVisible:false,
            formTitle:'',
            formEditRow:null,
            formEdit:false
        }
    },

    computed:{
    },
    mounted () {
        /*for(let i=0;i<100;i++){
            this.getCode('csbm')
        }*/
        this.loadTablePageData()
    },
    methods:{
        /*async getCode(id){
            let code = await this.$awaitWraper(api.get(id)) 
            console.log(id,code)
        },*///测试并发下面单据编码是否会重复的问题
        loadTablePageData(isNotFirst){
            if(!isNotFirst){
                this.tableCurrentPage = 1;
            }
            this.tableLoading = true;
            let queryData = {
                rows:this.tablePageSize,
                page:this.tableCurrentPage,
                sidx:'F_CreateDate',
                keyword:this.keyWord
            }
            api.getPage(queryData).then(res=>{
                const data = this.$deepClone(res.data.data)
                this.tableData = data.rows
                this.tableTotal = data.records
                this.tableLoading = false

            }).catch(()=>{
                this.tableData = []
                this.tableLoading = false
            })
        },
        turnTablePage({rows}){
            this.tablePageSize = rows
            this.loadTablePageData(true)
        },
        hanleSearch(){
            this.loadTablePageData()
        },

        // 表单部分
        handleAdd(){
            this.formEdit = false
            this.showForm('新增单据编码')
        },
        handleEdit($index,row){
            this.formEdit = true
            this.formEditRow = row
            this.showForm('编辑单据编码')
        },
        handleDelete($index,row){
            this.$confirm(
                this.$t("此操作将永久删除该数据, 是否继续?"), 
                this.$t("提示"), {
                confirmButtonText: this.$t("确定"),
                cancelButtonText: this.$t("取消"),
                type: 'warning'
            }).then(() => {
                api.remove(row.f_RuleId).then(()=> {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.loadTablePageData()
                    this.lr_loadCodeList(false)
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })          
            })
        },
        handleSave(showLoading,hideLoading){
            this.$refs.form.validateForm(()=>{
                showLoading()
                const formData = this.$refs.form.getForm()
                if(this.formEdit){// 修改数据
                    api.update(formData.f_RuleId,this.$deepClone(formData)).then(()=> {
                        hideLoading()
                        this.formVisible = false
                        this.$message({
                            type: 'success',
                            message: '更新成功!'
                        })
                        this.loadTablePageData()
                        this.lr_loadCodeList(false)
                    }).catch(() => {
                        hideLoading()
                    })
                }
                else{// 新增数据
                    api.add(this.$deepClone(formData)).then(()=> {
                        hideLoading()
                        this.formVisible = false
                        this.$message({
                            type: 'success',
                            message: '添加成功!'
                        })
                        this.loadTablePageData()
                        this.lr_loadCodeList(false)
                    }).catch(() => {
                        hideLoading()
                    })
                }
            })
        },
        handleOpenedForm(){
            if(this.formEdit){
                this.$refs.form.setForm(this.formEditRow)
            }
        },
        handleCloseForm(){
            this.$refs.form.resetForm()
        },
        showForm(text){
            this.formTitle = text
            this.formVisible = true
        }
    }

}
</script>